<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 1024px;
            height: 768px;

            font-size: 12px !important;
            color: white;
        }
    </style>

    <style>
        @font-face {
            font-family: 'PingFang';
            src: url('https://cdn.jsdelivr.net/npm/frontfontpackage@1.0.0/PingFang/苹方黑体-细-简.ttf');
            font-weight: normal;
            font-style: normal;
            font-display: optional
        }

        body {
            padding: 30px;
            background: #1C1D1E;
        }


        /* 父盒子 */
        .card {
            width: 12%;
            height: 80vh;
            background: #1F2426;
            padding: 3% 2%;
            /* padding-top: 3%; */

            border-radius: 20px;
        }

        .tab {
            display: flex;
            /* 横着排列 */
            flex-direction: row;
            overflow-y: scroll;
            white-space: nowrap;
            cursor: pointer;
        }

        .tab::-webkit-scrollbar {
            display: none;
        }

        .tab_item {
            font-size: 15px;
            font-family: PingFang, sans-serif;
            line-height: 1rem;
            color: #979797;
        }

        .text_active {
            color: #ffffff;
        }

        .text_active::after {
            color: #333333;
            content: "";
            display: block;
            width: 70%;
            height: 0px;
            margin: 0 auto;
            margin-top: 10px;
            border: 1px solid gray;
        }

        .tab>:not(:first-child) {
            margin-left: 15px;
        }
    </style>


    <style>
        .tab_container::-webkit-scrollbar{
            width: 5px;
            /* 对应横向滚动条的宽度 */
            height: 10px;
            background-color: #2a2a2a;
        }
        .tab_container::-webkit-scrollbar-thumb {
            background-color: #464a4c;
            border-radius: 32px;
        }
        .tab_container {
            height: 100%;
            overflow-y: auto;
            width: 100%;
        }
    </style>


<style>
    .tab_container_wall{
        padding-top: 20px;
        width: 100%;
        opacity: 0.5;
    }
    .tab_container_wall.active{
        padding-top: 20px;
        width: 100%;
        opacity: 1;
    }
    .tab_container_wall_image{
        width: 100%;
        margin: 0 auto;
        display: block;
        border-radius: 10px;
    }
</style>



<style>
    .right{
        color: white;
        margin-top: 10px;
    }
</style>

<style>
    .container{
        display: flex;
    }
</style>
</head>

<body>

        <div class="container">
            <div class="card">
                <div class="tab">
                    <span class="tab_item text_active" index=0>人物</span>
                    <span class="tab_item" index=1>背景</span>
                    <span class="tab_item" index=2>声音</span>
    
                </div>
    
                <div class="tab_container" index=0>
                 
                    <div class="tab_container_wall">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall active">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall active">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall active">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                    <div class="tab_container_wall active">
                        <img class="tab_container_wall_image" src=""></img>
                    </div>
                </div>
                <div class="tab_container" index=1>
                    1
                </div>
                <div class="tab_container" index=2>
                    2
                </div>
            </div>
            <div class="right">
                2
            </div>
        </div>
       

    

    <script>
        let mainTab = document.querySelector(".tab")
        let mainContainer = document.querySelectorAll(".tab_container")

        // 初始话术
        Array.from(mainContainer).forEach((e) => {
            e.style.display = "none"
        })

        mainContainer[0].style.display = "block"

        mainTab.addEventListener("click", (e) => {
            let index
            if (JSON.stringify(e.target.classList).match(/tab_item/)) {
                Array.from(mainTab.children).forEach((e) => {
                    e.classList.remove("text_active")
                })
                // 变化路由
                Array.from(mainContainer).forEach((e) => {
                    e.style.display = "none"
                })

                mainContainer[e.target.getAttribute("index")].style.display = "block"
                e.target.classList.add("text_active")
            }

        })
    </script>
</body>

</html>